<template>
    <div id="search">
        <div id="title">
        <div @click="showClick">
            <img src="../../static/icon/返回.svg">
            <span>返回</span>
        </div>
        <span>搜索</span>
    </div>
    <Search placeholder="搜索你想要的产品" :autoFixed="false" v-model="search" ></Search>
    <div id="hot-search">
        <div>热门搜索</div>
        <div id="hot-list">
            <div>铁观音秋茶</div>
            <div>金骏眉</div>
            <div>大红袍</div>
            <div>正山小种</div>
            <div>龙井</div>
            <div>云南滇红</div>
        </div>
    </div>
    </div>
</template>
<script>
import {Search} from "vux";
export default {
    components:{Search},
    data(){
        return {
            search:"",
        }
    },
    methods:{
        showClick(){
            this.search = "";
            this.$store.commit("setSearchShow",false);
        }
    }
}
</script>
<style scoped>
     #search{
        position: absolute;
        width: 100%;
        height: 100vh;
        background-color: #F4F4F4;
        left: 0;
        top: 0;
        z-index: 20;
    }
    #title{
        text-align: center;
        background-color: black;
        height: 12.2vw;
        color: white;
        line-height: 12.2vw;
    }
    #title div{
         position: absolute; 
         display: flex;
         font-size: 3.92vw;
    }
     img{
        width: 6.16vw;
        height: 12.2vw;
        padding-left: 1.12vw;
    } 
    #hot-search{
        background-color: white;
        padding: 2.8vw;
        font-size: 3.92vw;
        color: #7F7F7F;

    }
    #hot-list{
        display: flex;
        color: black;
        flex-wrap: wrap;
    }
    #hot-list div{
        background-color: #F5F5F5;
        padding: 1.4vw;
        margin: 1.4vw 2.8vw;
    }
</style>